<template>
  <div class="">
    <router-view></router-view>
    <footer>
      <ul>
        <li
          @click="tabChange(index)"
          :class="{ active: index == store.tabbarActive }"
          v-for="(item, index) in data.tabbarData"
          :key="index"
        >
          <div class="box" v-if="store.tabbarActive != index">
            <img :src="item.img" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="imgbox" v-else>
            <img :src="activeImg" alt="" />
          </div>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const router = useRouter()

const activeImg = ref(
  ''
)
const data = reactive({
  tabbarData: [
    {
      name: '选课',
      img: ''
    },
    {
      name: '我的课',
      img: ''
    },
    {
      name: '喵屋',
      img: ''
    },
    {
      name: '工具',
      img: ''
    },
    {
      name: '我的',
      img: ''
    }
  ]
})
onMounted(() => {
  if (store.tabbarActive == 0) {
    router.push('/')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 1) {
    router.push('/myKe')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 2) {
    router.push('/miaoWu')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 3) {
    router.push('/gongJu')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 4) {
    router.push('/my')
    activeImg.value =
      ''
  }
})
const tabChange = (i) => {
  store.tabChange(i)
  if (store.tabbarActive == 0) {
    router.push('/')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 1) {
    router.push('/myKe')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 2) {
    router.push('/miaoWu')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 3) {
    router.push('/gongJu')
    activeImg.value =
      ''
  } else if (store.tabbarActive == 4) {
    router.push('/my')
    activeImg.value =
      ''
  }
}
</script>
<style lang="scss" scoped>
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: #fff;
  padding: 10px 0;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: 20%;
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .box {
        img {
          width: 36px;
          height: 40px;
        }
        p {
          margin-top: 10px;
          padding: 0;
          margin-bottom: 0;
          font-size: 12px;
        }
      }
      .imgbox {
        img {
          width: 80px;
          height: 80px;
        }
      }
    }
    .active {
      color: red;
    }
  }
}
</style>
